import React from 'react'
// import styles from './ProduceList.module.css'
import { Row, Col, Image, Divider } from 'antd'
import { ProduceImage } from './ProduceImage'

interface PropsType {
  title: JSX.Element;
  sideImg: string;
  produce: any[];
}
export const ProduceList: React.FC<PropsType> = ({ title, sideImg, produce }) => {
  return (<div>
    <Divider>{title}</Divider>
    <Row>
      <Col span={4}>
        <Image src={sideImg} alt="" />
      </Col>
      <Col span={20}>
        <Row>
          <Col span={12}>
            <ProduceImage
              id={produce[0].id}
              size={"large"}
              title={produce[0].title}
              imageSrc={produce[0].touristRoutePictures.url}
              price={produce[0].price}
            />
          </Col>
          <Col span={12}>
            <Row>
              <Col span={12}><ProduceImage
                id={produce[1].id}
                size={"small"}
                title={produce[1].title}
                imageSrc={produce[1].touristRoutePictures.url}
                price={produce[1].price}
              /></Col>
              <Col span={12}><ProduceImage
                id={produce[2].id}
                size={"small"}
                title={produce[2].title}
                imageSrc={produce[2].touristRoutePictures.url}
                price={produce[2].price}
              /></Col>
            </Row>
            <Row>
              <Col span={12}><ProduceImage
                id={produce[3].id}
                size={"small"}
                title={produce[3].title}
                imageSrc={produce[3].touristRoutePictures.url}
                price={produce[3].price}
              /></Col>
              <Col span={12}><ProduceImage
                id={produce[4].id}
                size={"small"}
                title={produce[4].title}
                imageSrc={produce[4].touristRoutePictures.url}
                price={produce[4].price}
              /></Col>
            </Row>
          </Col>
        </Row>
        <Row>
          <Col span={6}><ProduceImage
            id={produce[5].id}
            size={"small"}
            title={produce[5].title}
            imageSrc={produce[5].touristRoutePictures.url}
            price={produce[5].price}
          /></Col>
          <Col span={6}><ProduceImage
            id={produce[6].id}
            size={"small"}
            title={produce[6].title}
            imageSrc={produce[6].touristRoutePictures.url}
            price={produce[6].price}
          /></Col>
          <Col span={6}><ProduceImage
            id={produce[7].id}
            size={"small"}
            title={produce[7].title}
            imageSrc={produce[7].touristRoutePictures.url}
            price={produce[7].price}
          /></Col>
          <Col span={6}><ProduceImage
            id={produce[8].id}
            size={"small"}
            title={produce[8].title}
            imageSrc={produce[8].touristRoutePictures.url}
            price={produce[8].price}
          /></Col>
        </Row>
      </Col>
    </Row>
  </div>)
}
